<template>
	<div class="game-container report-container addAgent-container">
		<div class="line-member"></div>
		<div class="addAgent-content">
			<div class="form-header">
				<span>{{ $t('risk.edit_risk_control_level') }}</span>
				<span>
					<code style="color: #ff3b30">*</code>
					{{ $t('common.add_dialog_tips') }}
				</span>
			</div>
			<el-form
				ref="form"
				:model="queryData"
				:rules="rules"
				label-width="auto"
			>
				<el-form-item
					:label="`${$t('risk.windControl_type')}`"
					prop="windControlType"
				>
					<el-select
						v-model="queryData.windControlType"
						size="medium"
						:placeholder="$t('common.all')"
						style="width: 365px"
						@change="changeRiskType($event)"
					>
						<el-option
							v-for="item in windLevelTypeArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					v-if="['1'].includes(queryData.windControlType)"
					:label="`${$t('common.member_number')}`"
					prop="userName"
				>
					<!--                    会员-->
					<el-input
						v-if="['1'].includes(queryData.windControlType)"
						v-model="queryData.userName"
						size="medium"
						maxlength="11"
						:placeholder="$t('common.please_enter')"
						clearable
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('userName')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					v-else-if="['2'].includes(queryData.windControlType)"
					:label="`${$t('common.agent_number')}`"
					prop="proxyUserName"
				>
					<!--                    代理-->
					<el-input
						v-model="queryData.proxyUserName"
						size="medium"
						maxlength="11"
						:placeholder="$t('common.please_enter')"
						clearable
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('proxyUserName')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					v-else-if="['3'].includes(queryData.windControlType)"
					:label="`${$t('common.components.card_number')}`"
					prop="cardNumber"
				>
					<!--                    银行卡-->
					<el-input
						v-model="queryData.cardNumber"
						size="medium"
						maxlength="25"
						oninput="value=value.replace(/^(0+)|[^\d]+/g,'')"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('cardNumber')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					v-else-if="['4'].includes(queryData.windControlType)"
					:label="`${$t('common.components.virtual_address')}`"
					prop="virtualAddress"
				>
					<!--             虚拟币      -->
					<el-input
						v-model="queryData.virtualAddress"
						show-word-limit
						type="textarea"
						size="medium"
						maxlength="100"
						:placeholder="$t('common.please_enter')"
						clearable
						oninput="value=value.replace(/[\u4E00-\u9FA5]/g ,'')"
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('virtualAddress')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					v-else-if="['5'].includes(queryData.windControlType)"
					:label="`${$t('risk.register_ip')}`"
					prop="registerIp"
				>
					<!--                    IP-->
					<el-input
						v-model="queryData.registerIp"
						size="medium"
						maxlength="15"
						:placeholder="$t('common.please_enter')"
						clearable
						oninput="value=value.replace(/[^\d.]/g,'')"
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('registerIp')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					v-else-if="['6'].includes(queryData.windControlType)"
					:label="`${$t('common.components.device')}`"
					prop="deviceNo"
				>
					<!--                    终端号-->
					<el-input
						v-model="queryData.deviceNo"
						size="medium"
						maxlength="100"
						:placeholder="$t('common.please_enter')"
						clearable
						style="width: 365px"
						@blur="checkValue"
					></el-input>
					<!--                    <span v-show="tipsShow" class="tips">{{ tipsShow }}</span>-->
					<el-button
						type="primary"
						style="margin-left: 20px"
						@click="searchInfo('deviceNo')"
					>
						<i v-show="loading" class="el-icon-loading"></i>
						{{ $t('common.search') }}
					</el-button>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					prop="merchantId"
				>
					<el-select
						v-model="queryData.merchantId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						:disabled="dialogMerchantDisabled"
						style="width: 365px"
						:maxlength="10"
						@change="handleMerchantChange()"
					>
						<el-option
							v-for="item in merchantIdList"
							:key="item.merchantId"
							:label="item.merchantName"
							:value="item.merchantId"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('common.risk_control_level')}:`"
					prop="windControlLevelId"
				>
					<el-select
						v-model="queryData.windControlLevelId"
						size="medium"
						:placeholder="$t('common.select_all')"
						clearable
						style="width: 365px"
						@change="checkRiskValue($event)"
					>
						<el-option
							v-for="item in vipDict"
							:key="item.id"
							:label="item.windControlLevelName"
							:value="item.id"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item
					:label="`${$t('risk.wind_reason')}:`"
					prop="windReason"
				>
					<el-input
						v-model="queryData.windReason"
						type="textarea"
						:placeholder="$t('common.please_enter')"
						:maxlength="50"
						show-word-limit
						style="width: 365px"
						v-input="{ name: 'noEmpty' }"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button
						v-if="hasPermission('601022')"
						type="primary"
						icon="el-icon-search"
						:disabled="loadingT"
						size="medium"
						@click="add"
					>
						{{ $t('common.submit') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
				</el-form-item>
			</el-form>
		</div>
		<div class="info-show">
			<div class="info-header">
				<span v-if="!!showInfoData">
					{{ $t('member.essential_infor') }}
				</span>
			</div>
			<component
				:is="content"
				v-if="!!showInfoData"
				:showInfoData="showInfoData"
			></component>
		</div>
	</div>
</template>

<script>
import { routerNames } from '@/utils/consts'
import list from '@/mixins/list'
// import { notSpecial2, isHaveEmoji } from '@/utils/validate'
import UserName from '@/components/editRisk/userName'
import AgentName from '@/components/editRisk/agentName'
import BankCard from '@/components/editRisk/bankCard'
import Virtual from '@/components/editRisk/virtual'
import Ip from '@/components/editRisk/ip'
import Device from '@/components/editRisk/device'

export default {
	name: routerNames.editRiskRank,
	components: { UserName, AgentName, BankCard, Virtual, Ip, Device },
	mixins: [list],
	data() {
		this.searchInfo = this.throttle(this.searchInfo, 1000)
		return {
			loading: false,
			loadingT: false,
			dialogMerchantDisabled: false,
			queryData: {
				windControlType: '1',
				windControlName: undefined,
				userName: undefined,
				proxyUserName: undefined,
				cardNumber: undefined,
				windControlLevelId: undefined,
				merchantId: undefined,
				virtualAddress: undefined,
				registerIp: undefined,
				deviceNo: undefined,
				windReason: undefined
			},
			vipDict: [],
			merchantIdList: [],
			showInfoData: undefined,
			current: '',
			tipsShow: null
		}
	},
	computed: {
		windLevelTypeArr() {
			return this.globalDics.windLevelType || []
		},
		content() {
			const obj = [
				'UserName',
				'AgentName',
				'BankCard',
				'Virtual',
				'Ip',
				'Device'
			]
			return obj[this.current]
		},
		rules() {
			const merchantId = [
				{
					required: true,
					message: this.$t('member.please_select_merchant'),
					trigger: 'change'
				}
			]
			const windControlType = [
				{
					required: true,
					message: this.$t('member.please_select__risk_control_type'),
					trigger: 'change'
				}
			]
			const windControlLevelId = [
				{
					required: true,
					message: this.$t('member.select_wind_control_id'),
					trigger: 'change'
				}
			]
			const userName = [
				{
					required: true,
					message: this.$t('member.username_placeholder'),
					trigger: 'blur'
				}
			]
			const proxyUserName = [
				{
					required: true,
					message: this.$t('agent.rule_input_tip_account'),
					trigger: 'blur'
				}
			]
			const cardNumber = [
				{
					required: true,
					message: this.$t('member.rule_input_tip_bankcardno'),
					trigger: 'blur'
				}
			]
			const virtualAddress = [
				{
					required: true,
					message: this.$t(
						'member.rule_input_tip_virtualcurrency_address'
					),
					trigger: 'blur'
				}
			]
			const registerIp = [
				{
					required: true,
					message: this.$t('member.rule_input_tip_ip'),
					trigger: 'blur'
				}
			]
			const deviceNo = [
				{
					required: true,
					message: this.$t('member.rule_input_tip_equipmentno'),
					trigger: 'blur'
				}
			]
			const windReason = [
				{
					required: true,
					message: this.$t('member.rule_input_tip_audit_information'),
					trigger: 'blur'
				}
			]
			return {
				windControlType,
				windControlLevelId,
				userName,
				proxyUserName,
				cardNumber,
				merchantId,
				virtualAddress,
				registerIp,
				deviceNo,
				windReason
			}
		}
	},
	mounted() {
		// this.getMerchantDict('1')
	},
	methods: {
		add() {
			this.loadingT = true
			const params = {
				...this.queryData
			}
			let lock = true
			params.windControlType = params.windControlType * 1
			params.userName ? (params.objectInfo = params.userName) : null
			params.proxyUserName
				? (params.objectInfo = params.proxyUserName)
				: null
			params.cardNumber ? (params.objectInfo = params.cardNumber) : null
			params.virtualAddress
				? (params.objectInfo = params.virtualAddress)
				: null
			params.registerIp ? (params.objectInfo = params.registerIp) : null
			params.deviceNo ? (params.objectInfo = params.deviceNo) : null
			delete params.userName
			delete params.proxyUserName
			delete params.cardNumber
			delete params.virtualAddress
			delete params.registerIp
			delete params.deviceNo
			this.$refs['form'].validate((valid) => {
				if (valid && lock && !this.tipsShow) {
					lock = false
					this.$api
						.riskEditAddAPI(params)
						.then((res) => {
							this.loadingT = false
							lock = true
							const { msg } = res
							if (res?.code === 200) {
								this.$confirm(
									`${this.$t('common.submit_success')}`,
									{
										confirmButtonText: this.$t(
											'common.sure'
										),
										type: 'success',
										showCancelButton: false
									}
								)
								this.$nextTick(() => {
									this.$refs['form'].clearValidate()
								})
								this.showInfoData = false
								this.reset()
							} else {
								this.$message({
									message: msg,
									type: 'error'
								})
							}
						})
						.catch(() => {
							this.loadingT = false
							lock = true
						})
				}
			})

			setTimeout(() => {
				this.loadingT = false
				lock = true
			}, 1000)
		},
		reset() {
			this.$refs['form'].resetFields()
			this.vipDict = []
			this.queryData = {
				windControlType: '1',
				windControlName: undefined,
				userName: undefined,
				proxyUserName: undefined,
				cardNumber: undefined,
				virtualAddress: undefined,
				registerIp: undefined,
				windControlLevelId: undefined,
				deviceNo: undefined,
				windReason: undefined
			}
		},
		changeRiskType(evt) {
			this.$refs['form'].resetFields()
			this.showInfoData = undefined
			this.queryData = {
				windControlName: undefined,
				userName: undefined,
				proxyUserName: undefined,
				cardNumber: undefined,
				windControlLevelId: undefined,
				virtualAddress: undefined,
				registerIp: undefined,
				deviceNo: undefined,
				windReason: undefined,
				windControlType: evt
			}
			// this.getMerchantDict(evt)
		},
		handleMerchantChange() {
			this.getMerchantDict({
				merchantId: this.queryData.merchantId,
				windControlType: this.queryData.windControlType
			})
		},
		// 获取风控层级
		getMerchantDict(val) {
			this.queryData.windControlName = undefined
			this.$api.getSelectWindControlLevel(val).then((res) => {
				const { data, msg } = res
				if (res?.code === 200) {
					this.vipDict = data || []
				} else {
					this.$message({
						message: msg,
						type: 'error'
					})
				}
			})
		},
		searchInfo(type) {
			const {
				userName,
				proxyUserName,
				deviceNo,
				cardNumber,
				virtualAddress,
				registerIp
			} = this.queryData
			switch (type) {
				case 'userName':
					this.$refs.form.validateField('userName')
					if (this.queryData.userName) {
						this.$api
							.riskEditInfoAPI({
								objectInfo: userName,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 0
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}
									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										this.tipsShow = this.$t(
											'risk.member_does_not_exist'
										)
										return this.$message({
											message: this.$t(
												'risk.member_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break

				case 'proxyUserName':
					this.$refs.form.validateField('proxyUserName')
					if (proxyUserName) {
						this.$refs.form.clearValidate('windControlName')
						this.$refs.form.clearValidate('windReason')
						this.$api
							.riskEditInfoAPI({
								objectInfo: proxyUserName,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 1
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}
									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										this.tipsShow = this.$t(
											'risk.agent_does_not_exist'
										)
										return this.$message({
											message: this.$t(
												'risk.agent_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break

				case 'cardNumber':
					this.$refs.form.validateField('cardNumber')
					if (cardNumber) {
						this.$api
							.riskEditInfoAPI({
								objectInfo: cardNumber,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 2
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}

									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										this.tipsShow = this.$t(
											'risk.bankcard_does_not_exist'
										)
										return this.$message({
											message: this.$t(
												'risk.bankcard_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break

				case 'virtualAddress':
					this.$refs.form.validateField('virtualAddress')
					if (virtualAddress) {
						this.$refs.form.clearValidate('windControlName')
						this.$refs.form.clearValidate('windReason')
						this.$api
							.riskEditInfoAPI({
								objectInfo: virtualAddress,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 3
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}

									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										this.tipsShow = this.$t(
											'risk.virtualcurrency_does_not_exist'
										)
										return this.$message({
											message: this.$t(
												'risk.virtualcurrency_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break

				case 'registerIp':
					this.$refs.form.validateField('registerIp')
					if (registerIp) {
						this.$refs.form.clearValidate('windControlName')
						this.$refs.form.clearValidate('windReason')
						this.$api
							.riskEditInfoAPI({
								objectInfo: registerIp,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 4
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}

									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										return this.$message({
											message: this.$t(
												'risk.ip_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break

				case 'deviceNo':
					this.$refs.form.validateField('deviceNo')
					if (deviceNo) {
						this.$refs.form.clearValidate('windControlName')
						this.$refs.form.clearValidate('windReason')
						this.$api
							.riskEditInfoAPI({
								objectInfo: deviceNo,
								windControlType: this.queryData.windControlType
							})
							.then((res) => {
								if (res?.code === 200) {
									this.tipsShow = null
									this.current = 5
									this.merchantIdList = res.data
									if (this.merchantIdList.length === 1) {
										this.queryData.windReason = undefined
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId =
											res.data[0].merchantId
										this.dialogMerchantDisabled = true
										this.getMerchantDict({
											windControlType: this.queryData
												.windControlType,
											merchantId: this.queryData
												.merchantId
										})
									} else {
										this.queryData.windControlLevelId = undefined
										this.queryData.merchantId = undefined
										this.queryData.windReason = undefined
										this.dialogMerchantDisabled = false
									}

									for (
										let i = 0;
										i < this.merchantIdList.length;
										i++
									) {
										const ele = this.merchantIdList[0]
										this.showInfoData = ele
									}
									if (res.data.length === 0) {
										return this.$message({
											message: this.$t(
												'risk.deviceNo_does_not_exist'
											),
											type: 'error'
										})
									}
									this.$nextTick(() => {
										this.$refs['form'].clearValidate()
									})
								} else {
									this.showInfoData = undefined
								}
							})
					}
					break
			}
		},
		checkRiskValue(val) {
			this.$nextTick(() => {
				this.$refs['form'].resetField()
			})
			this.queryData.windControlLevelId = undefined
			const item = this.vipDict.find((item) => item.id === val)
			this.queryData.windControlName = item && item.windControlLevelName
			this.queryData.windControlLevelId = item && item.id
		},
		checkValue() {
			// this.tipsShow = null
		}
	}
}
</script>

<style lang="scss" scoped>
.el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
}
.addAgent-container {
	background-color: #f5f5f5;
	margin: 0;
	min-height: calc(100vh - 105px);
	.line-member {
		height: 50px;
	}
	.addAgent-content {
		width: 1000px;
		margin: 0 auto;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		position: relative;
		padding-top: 65px;
		padding-bottom: 65px;
		.form-header {
			height: 45px;
			line-height: 45px;
			span:nth-child(1) {
				position: absolute;
				left: 30px;
				top: 0;
				color: #666;
				font-size: 14px;
				font-weight: 700;
			}
			span:nth-child(2) {
				position: absolute;
				right: 30px;
				color: #999;
				font-weight: 400;
				font-size: 14px;
				top: 0;
			}
		}
	}
	.addAgent-content::after {
		position: absolute;
		top: 45px;
		content: '';
		width: 100%;
		background-color: rgba(233, 233, 233, 1);
		height: 1px;
	}
	.info-show {
		width: 1000px;
		justify-content: center;
		align-items: center;
		background-color: #fff;
		margin: 0 auto;
		position: relative;
		min-height: 300px;
		padding-left: 40px;
		padding-right: 40px;
		.info-header {
			border-top: 1px rgba(233, 233, 233, 1) solid;
			span {
				margin-top: 45px;
				display: inline-block;
				width: 188px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				background: #000;
				color: rgb(255, 255, 255);
			}
		}
		.info-content {
			margin-top: 30px;
			font-size: 14px;
			.info-content-row {
				padding-top: 20px;
				padding-bottom: 20px;
			}
		}
	}

	.tips {
		color: #f56c6c;
		font-size: 12px;
		line-height: 1;
		padding-top: 4px;
		position: absolute;
		top: 100%;
		left: 0;
	}
}
</style>
